<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" v-model="searchText" placeholder="大家正在搜：vivo S20系列新品发布" />
      <button @click="search" class="search-btn">搜索</button>
    </view>
    <!-- 标签栏 -->
    <view class="tab-bar">
      <text class="tab" :class="{active: currentTab === 'discover'}" @click="changeTab('discover')">发现</text>
      <text class="tab" :class="{active: currentTab === 'trend'}" @click="changeTab('trend')">趋势</text>
      <text class="tab" :class="{active: currentTab === 'ranking'}" @click="changeTab('ranking')">榜单</text>
    </view>
    <!-- 热门搜索列表 -->
    <view class="hot-search">
      <text class="hot-item">黄晓明删除官宣博文</text>
      <text class="hot-item">vivo S20系列</text>
      <text class="hot-item">王大发曝王鹤棣给了...</text>
      <text class="hot-item">小米su7</text>
      <text class="hot-item">恋与深空 秦彻</text>
      <text class="hot-item">冯绍峰 名媛培训班</text>
      <text class="hot-item">冯绍峰恋情</text>
      <text class="hot-item">沈梦瑶 取关</text>
      <text class="hot-item">Newjeans宣布解约</text>
      <text class="hot-item">李行亮只争女儿抚养权</text>
      <text class="hot-item">2岁女童因投喂后呕...</text>
    </view>
    <view class="ad-banner">
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: '',
      networkStatus: '',
      batteryLevel: '',
      searchText: '',
      currentTab: 'discover',
      currentBottomTab: 'home'
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.time = res.currentTime;
        this.networkStatus = res.networkType;
        this.batteryLevel = res.batteryLevel;
      }
    });
  },
  methods: {
    search() {
      // 在这里实现搜索逻辑，例如跳转到搜索结果页面
      console.log('搜索关键词：', this.searchText);
    },
    changeTab(tab) {
      this.currentTab = tab;
    },
    changeBottomTab(tab) {
      this.currentBottomTab = tab;
    }
  }
}
</script>

<style>
/* 整体容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif; /* 设置全局字体 */
  background-color: #f4f4f4; /* 背景色 */
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ccc;
  background-color: #fff; /* 白色背景 */
}

.search-bar input[type="text"] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px; /* 输入框字体大小 */
}

.search-btn {
  background-color: #007aff; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px; /* 按钮字体大小 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

.search-btn:hover {
  background-color: #0056b3; /* 鼠标悬停时按钮背景色变化 */
}

/* 标签栏样式 */
.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff; /* 白色背景 */
  border-bottom: 1px solid #ccc;
}

.tab {
  padding: 10px;
  font-size: 16px; /* 标签字体大小 */
  cursor: pointer;
  color: #333; /* 标签文字颜色 */
  transition: color 0.3s ease; /* 过渡效果 */
}

.tab:hover {
  color: #007aff; /* 鼠标悬停时标签文字颜色变化 */
}

.active {
  color: #007aff; /* 当前选中标签颜色 */
  font-weight: bold; /* 当前选中标签加粗 */
}

/* 热门搜索列表样式 */
.hot-search {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #fff; /* 白色背景 */
}

.hot-item {
  padding: 8px;
  font-size: 14px; /* 热门搜索项字体大小 */
  color: #666; /* 热门搜索项文字颜色 */
  border-bottom: 1px solid #eee; /* 分割线 */
}

/* 广告横幅样式（这里为空，可根据实际需求添加样式） */
.ad-banner {
  width: 100%;
  height: 150px; /* 假设广告横幅高度 */
  background-color: #ccc; /* 示例背景色，可替换 */
  margin: 10px 0;
}

/* 内容区域样式 */
.content {
  width: 100%;
  background-color: #fff; /* 白色背景 */
  padding: 15px;
}

/* 特色按钮样式 */
.feature-buttons {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.feature-button {
  border-radius: 50%;
  background-color: #ff5252; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
  font-size: 18px; /* 按钮文字大小 */
  cursor: pointer;
  transition: background-color 0.3s ease; /* 过渡效果 */
}

.feature-button:hover {
  background-color: #e03e3e; /* 鼠标悬停时按钮背景色变化 */
}

/* 分类按钮样式 */
.category-buttons {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.category-button {
  border-radius: 20px;
  background-color: #ff8a80; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  padding: 10px 20px;
  margin: 8px;
  font-size: 14px; /* 按钮字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease; /* 过渡效果 */
}

.category-button:hover {
  background-color: #ff6e6e; /* 鼠标悬停时按钮背景色变化 */
}

/* 产品信息样式 */
.product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

.product-text {
  padding: 8px;
  font-size: 16px; /* 产品信息字体大小 */
  color: #333; /* 产品信息文字颜色 */
}

/* 底部导航栏样式（假设代码中有相关功能，这里先给出样式框架） */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; /* 白色背景 */
  border-top: 1px solid #ccc;
  padding: 10px;
}

.nav-item {
  padding: 10px;
  font-size: 14px; /* 底部导航项字体大小 */
  color: #333; /* 底部导航项文字颜色 */
  cursor: pointer;
  transition: color 0.3s ease; /* 过渡效果 */
}

.nav-item:hover {
  color: #007aff; /* 鼠标悬停时底部导航项文字颜色变化 */
}
</style>